<template>
  <!-- 产品大厅 -->
  <div class="product_styl">
    <img class="img_styl" src="@/assets/images/product.png" alt="" srcset="" />
    <div class="product_content">
      <div class="product_left">
        <div class="btn_styl">
          <Button @click="resetFun" class="btn_reset" type="primary">产品大厅首页</Button>
        </div>
        <!-- 分类筛选 -->
        <div class="class_search">
          <div class="product_class">
            <div class="search_class">产品分类</div>
            <!-- <div class="search_more">
              多选
              <i-Switch
                v-model="switch1"
                size="small"
                @on-change="change"
                style="marginLeft:6px"
              />
            </div> -->
          </div>
          <div class="search_top">
            <div class="class_content">
              <!-- 单选 -->
              <div
                class="class_item"
                v-if="!switch1 && (classShow1 || index < 6)"
                :class="{ class_itemCopy: index == chooseInde1 }"
                @click="chooseFun('class', item, index)"
                v-for="(item, index) in classList"
                :key="index"
              >
                {{ item.classifyName }}
              </div>
              <!-- 多选 -->
              <div class="class_item" v-if="switch1" v-for="(item, index) in classList" :key="index">
                <CheckboxGroup v-model="social">
                  <Checkbox label="twitter">
                    <span>9汽油</span>
                  </Checkbox>
                </CheckboxGroup>
              </div>
            </div>
            <div class="btn_open" v-if="switch1">
              <div class="btn_cancel" @click="switch1 = false">取消</div>
              <div class="btn_ok" @click="switch1 = false">保存</div>
            </div>
            <div class="btn_open" v-if="!switch1">
              <div v-if="!classShow1" @click="classShow1 = true">
                展开
                <Icons font="#icon-x" class="icon-x" style="marginleft: 4px" fontSize="14px"></Icons>
              </div>
              <div v-if="classShow1" @click="classShow1 = false">
                收起
                <Icons font="#icon-s" class="icon-s" style="marginleft: 4px" fontSize="14px"></Icons>
              </div>
            </div>
          </div>
        </div>

        <Lines class="line_styl" backColor="#F6F6F6" widthNum="174px" heightNum="2px" marginLeftright="auto" marginUpdown="12px"></Lines>

        <!-- 公司筛选 -->
        <div class="company_styl">
          <div class="class_search">
            <div class="product_class">
              <div class="search_class">销售公司</div>
              <!-- <div class="search_more">
                多选
                <i-Switch
                  v-model="switch1"
                  size="small"
                  @on-change="change"
                  style="marginleft: 6px"
                />
              </div> -->
            </div>
            <div class="search_top">
              <div class="class_content">
                <!-- 单选 -->
                <div
                  class="class_item"
                  v-if="!switch1 && (classShow2 || index < 6)"
                  :class="{ class_itemCopy: index == chooseInde2 }"
                  @click="chooseFun('company', item, index)"
                  v-for="(item, index) in companyList"
                  :key="index"
                >
                  {{ item.orgName }}
                </div>
                <!-- 多选 -->
                <div class="class_item" style="marginright: 0" v-if="switch1" v-for="(item, index) in companyList" :key="index">
                  <CheckboxGroup v-model="social">
                    <Checkbox label="twitter">
                      <span>振华石油</span>
                    </Checkbox>
                  </CheckboxGroup>
                </div>
              </div>
              <div class="btn_open" v-if="switch1">
                <div class="btn_cancel" @click="switch1 = false">取消</div>
                <div class="btn_ok" @click="switch1 = false">保存</div>
              </div>
              <div class="btn_open" v-if="!switch1">
                <div v-if="!classShow2" @click="classShow2 = true">
                  展开
                  <Icons font="#icon-x" class="icon-x" style="marginleft: 4px" fontSize="14px"></Icons>
                </div>
                <div v-if="classShow2" @click="classShow2 = false">
                  收起
                  <Icons font="#icon-s" class="icon-s" style="marginleft: 4px" fontSize="14px"></Icons>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧商品列表 -->
      <div class="product_right">
        <div class="product_item1" v-if="MX_DataList && MX_DataList.length == 0">
          <QdNoData ref="QdNoData" titleContent="暂无商品信息 ~"></QdNoData>
        </div>
        <Spin fix v-if="MX_tableLoading"></Spin>
        <div class="product_item" @click="toPageFun(item)" v-for="(item, index) in MX_DataList" :key="item.id">
          <img class="product_img" :src="item.img && item.img.length ? imagePreviewUrl + item.img[0] : ''" alt="" srcset="" />
          <Lines class="line_styl" backColor="#2973E4" widthNum="20px" heightNum="3px"></Lines>
          <div class="product_name">
            {{ item.name }}
          </div>
          <div class="product_tip">点击查看价格</div>
        </div>
      </div>
    </div>
    <div class="page_styl">
      <Page v-if="MX_DataList.length != 0" :page-size="MX_pageSize" :total="MX_total" @on-change="MX_changePageFun" show-total />
    </div>
  </div>
</template>

<script>
import QdNoData from "@/components/common/Qd-NoData.vue";
import listMixins from "@/mixins/listMixins";
import { myMixins } from "@/mixins/base";
import localData from "../../../localData";

export default {
  components: { QdNoData },
  mixins: [listMixins, myMixins],
  data() {
    return {
      imagePreviewUrl: localData.API_URl + "/guns", // 图片预览地址
      MX_apis: {
        getlist: "API_productCategoryList"
      },
      classList: [],
      companyList: [],
      chooseInde1: -1,
      chooseInde2: -1,
      classShow1: false,
      classShow2: false,
      switch1: false,
      MX_constParams: {
        delStatus: 1
        // type: 0
      }
    };
  },
  mounted() {
    this.getClassList();
    this.MX_companyList();

    if (this.$route.params && this.$route.params.searchInfo) {
      this.MX_searchParams.storeName = this.$route.params.searchInfo;
      this.MX_getData();
    } else {
      this.MX_getData();
    }
    // 监听筛选商品名称
    this.$Bus.$on("search", this.searchFun);
  },
  destroyed() {
    this.$Bus.$off("search");
  },
  methods: {
    resetFun() {
      location.reload();
    },
    searchFun(val) {
      this.MX_searchParams.storeName = val.searchInfo;
      this.MX_resetPage();
    },
    chooseFun(flag, item, index) {
      if (flag == "class") {
        if (this.chooseInde1 == index) {
          this.chooseInde1 = -1;
          this.MX_searchParams.classify = "";
        } else {
          this.MX_searchParams.classify = item.id;
          this.chooseInde1 = index;
        }
      }
      if (flag == "company") {
        if (this.chooseInde2 == index) {
          this.chooseInde2 = -1;
          this.MX_searchParams.companyId = "";
        } else {
          this.MX_searchParams.companyId = item.orgId;
          this.chooseInde2 = index;
        }
      }

      this.MX_getData();
    },
    // 获取分类列表
    getClassList() {
      this.httpGet(this.API.API_categoryList, {})
        .then((res) => {
          this.classList = res.data;
        })
        .catch((err) => {
          console.error("分类接口报错:", err);
        });
    },
    toPageFun(item) {
      this.$router.replace({
        path: "/product/product-detail",
        query: {
          id: item.id
        }
      });
    },
    change() {}
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.product_styl {
  margin: 0 auto;
  min-height: 500px;
  padding-bottom: 150px;
  background-color: #f3f3f3;

  .img_styl {
    width: 100%;
    height: 110px;
  }

  .product_content {
    .flex-x();
    align-items: flex-start;
    width: 1185px;
    margin: 0 auto;

    .product_left {
      position: sticky;
      top: 110px;
      width: 214px;
      padding: 22px 0 10px 0;
      background-color: #ffffff;

      .btn_styl {
        padding: 0 0 20px 13px;
        text-align: left;

        .btn_reset {
          width: 120px;
        }
      }

      .product_class {
        .flex-x();
        padding: 0 12px;

        .search_class {
          font-size: 14px;
          font-weight: bold;
        }

        .search_more {
          .flex-x();
          font-size: 12px;
          color: #999999;
        }
      }

      .class_content {
        .flex-x(flex-start);
        flex-wrap: wrap;
        font-size: 12px;
        margin: 9px 9px 4px 9px;
        padding: 16px 10px;
        overflow: hidden;
        background-color: #f6f6f6;

        .class_item {
          margin: 0 8px 12px 0;
          cursor: pointer;
          .one-ellipsis();
        }

        .class_itemCopy {
          padding: 1px 4px;
          font-weight: bold;
          border-radius: 2px;
          color: @themeColor;
          background-color: #e1edff;
          border: 1px solid @themeColor;
        }
      }

      .btn_open {
        .flex-x(center);
        color: #999999;
        cursor: pointer;

        .btn_cancel {
          .hollow-btn(60px, 24px, 4px, #ffffff, #d7d7d7, #333333);
          margin-right: 6px;
        }

        .btn_ok {
          .hollow-btn(60px, 24px, 4px, #ffffff, @themeColor, @themeColor);
        }
      }
    }

    .company_styl {
      padding-top: 16px;
    }

    .product_right {
      position: relative;
      .flex-x(flex-start);
      flex-wrap: wrap;
      width: 962px;

      .product_item1 {
        width: 100%;
        height: 510px;
        background-color: #ffffff;
      }

      .product_item {
        .flex-y(space-between);
        flex-shrink: 0;
        width: 186px;
        height: 278px;
        margin: 0 8px 14px 0;
        padding: 22px 0;
        background-color: #ffffff;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        }
        .product_img {
          width: 152px;
          height: 142px;
        }

        .product_name {
          font-size: 16px;
          font-weight: bold;
        }

        .product_tip {
          color: #e11b1b;
        }
      }

      .product_item:nth-child(5n) {
        margin-right: 0;
      }
    }
  }

  .page_styl {
    width: 1185px;
    margin: 20px auto 0 auto;
    text-align: right;
  }
}
</style>
